<template>
  <view class="wrap">
    <view class="equipment-grid" @tap="gridHandle('analysis')">
      <image
        v-if="equipmentData.deviceNo"
        class="equipment-binding-icon"
        src="https://ainengli.hzjrsw.com/jkhx/common/binding.png"
        mode="scaleToFill"
      />
      <image
        class="equipment-image"
        src="https://ainengli.hzjrsw.com/jkhx/common/viva.png"
        mode="widthFix"
      />
      <view class="equipment-text">
        <text class="name">微策三合一分析仪</text>
        <text class="desc" v-if="equipmentData.idCode">SN:{{ equipmentData.idCode }}</text>
      </view>
    </view>
    <view class="equipment-grid" @tap="gridHandle('fatSacle')">
      <image
        class="equipment-image"
        src="https://ainengli.hzjrsw.com/jkhx/common/fat-sacle.png"
        mode="widthFix"
      />
      <view class="equipment-text">
        <text class="name">体脂秤</text>
      </view>
    </view>
    <view class="equipment-grid" @tap="gridHandle('hematomanometer')">
      <image
        class="equipment-image"
        src="https://ainengli.hzjrsw.com/jkhx/common/hematomanometer.png"
        mode="widthFix"
      />
      <view class="equipment-text">
        <text class="name">血压计</text>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import { getEquipmentStatus } from './equipment.api'
import { onShow } from '@dcloudio/uni-app'
import type { equipmentDataModel } from './equipmentModel'

const equipmentData = ref<equipmentDataModel>({
  deviceName: '',
  deviceNo: '',
  deviceType: '',
  userId: '',
  idCode: ''
})

onShow(() => {
  getInfo()
})

const getInfo = () => {
  getEquipmentStatus({ deviceType: 'WEICE_ANALYSER' }).then((res: any) => {
    if (res.data) {
      equipmentData.value = res.data
    }
  })
}
const gridHandle = (name: string) => {
  if (equipmentData.value.deviceNo && name === 'analysis') {
    uni.redirectTo({
      url: `/module/src/pages/myEquipment/detail?name=${name}&deviceNo=${equipmentData.value.deviceNo}`
    })
  } else {
    if (name === 'analysis') {
      uni.navigateTo({
        url: `/module/src/pages/myEquipment/binding?name=${name}`
      })
    } else {
      uni.scanCode({
        success: (res: any) => {
          uni.showToast({
            title: '绑定失败',
            icon: 'error'
          })
        },
        complete: () => {
          // uni.showToast({
          //   title: '绑定失败',
          //   icon: 'error'
          // })
          // setTimeout(() => {
          //   uni.navigateBack()
          // }, 1500)
        }
      })
      // uni.navigateTo({
      //   url: `/module/src/pages/myEquipment/sacnCode`
      // })
    }
  }
}
</script>
<style lang="scss" scoped>
.wrap {
  min-height: 100vh;
  padding: 34rpx 32rpx;
}

.equipment-grid {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 208rpx;
  padding: 24rpx 32rpx;
  margin-bottom: 24rpx;
  background-color: #fff;
  border-radius: 16rpx;
}

.equipment-binding-icon {
  position: absolute;
  top: 0;
  right: 0;
  width: 120rpx;
  height: 48rpx;
}

.equipment-image {
  width: 160rpx;
  height: 160rpx;
  margin-right: 24rpx;
}

.equipment-text {
  display: flex;
  flex-direction: column;

  .name {
    margin-bottom: 24rpx;
    font-size: 36rpx;
    font-weight: 700;
    color: #1d2129;
  }

  .desc {
    font-size: 24rpx;
    font-weight: 400;
    color: #999;
  }
}
</style>
